<template>
  <div class="cycle">
    <span>生效周期</span>
    <div class="cycle__content">
      <div
        :class="['cycle__item', isSelect == item.value ? 'isSelect' : '']"
        v-for="item in cycleList"
        :key="item.value"
        @click="handleCycle(item.value)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['change'])

let cycleList = ref([
  { name: '单次', value: 'startToEndOfSingle', dateList: [] },
  { name: '本周', value: 'startToEndOfWeek', dateList: [] },
  { name: '近7天', value: 'startToEndOfLast7Days', dateList: [] },
  { name: '近14天', value: 'startToEndOfLast14Days', dateList: [] },
  { name: '本月', value: 'startToEndOfMonth', dateList: [] }
])

let isSelect = ref('startToEndOfSingle')

const handleCycle = (val) => {
  isSelect.value = val
  emit('change', val)
}
</script>

<style lang="scss" scoped>
.cycle {
  display: flex;
  align-items: center;
  .cycle__content {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-left: 10px;
    .isSelect {
      background-color: #1890ff;
      color: #fff;
      transition: all 0.3s;
    }
    .cycle__item {
      cursor: pointer;
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      border-right: 1px solid #dcdfe6;
    }
    .cycle__item:last-child {
      border-right: none;
    }
    .cycle__item:hover {
      background-color: #1890ff;
      color: #fff;
      transition: all 0.3s;
    }
  }
}
</style>
